<template>
  <view class="app-header">
    <view class="top" :style="{ height: sysInfo.statusBarHeight + 'px' }">
      <text style="opacity: 0">1</text>
    </view>
    <view class="flex-row content">
      <view class="logo" style="position: absolute; left: 15px" v-if="!props.title">
        <image
          src="https://hongwu-1318589231.cos.ap-guangzhou.myqcloud.com/dongyuan/default/2025/08/05/ed7060dca37b43c69c30f1bf01ffd1862kQWewJbJ4wK15a011c3306944a3f3930bda80f44534.png"
          mode="widthFix"
          style="width: 80px; height: 40px"
        ></image>
      </view>
      <view
        class="flex-row"
        style="position: absolute; left: 15px"
        v-if="props.title"
        @click="back"
      >
        <u-icon name="arrow-left" color="#0F90FD"></u-icon>
        <text style="margin-left: 10px; color: #0f90fd">返回</text>
      </view>
      <view style="flex: 1; text-align: center">
        <text style="margin-left: 30px" class="title">{{
          props.title || storeInfo.deptName || '未登录'
        }}</text>
      </view>
      <view style="position: absolute; right: 20px" class="flex-row" v-if="!props.title">
        <view>Hellow，{{ userInfo.user.nickName }}</view>
        <image
          src="@/static/icons/logout.png"
          mode="widthFix"
          style="width: 16px; margin-left: 10px; margin-right: 4px"
          @click="logout"
        ></image>
        <text @click="logout">退出</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useSysInfo } from '@/stores/modules/sysInfo'
import { useUser } from '@/stores/modules/user'
const { sysInfo } = useSysInfo()
const { userInfo } = useUser()
const storeInfo = uni.getStorageSync('storeInfo')
console.log(userInfo, '用户信息')
console.log(storeInfo, '选择门店信息')

if (!userInfo || !userInfo.user) {
  uni.reLaunch({
    url: '/pages/login/index',
  })
}

const props = defineProps({
  title: String,
})

const back = () => {
  uni.navigateBack()
}

const logout = () => {
  uni.reLaunch({
    url: '/pages/login/index',
  })
  uni.removeStorageSync('token');
  uni.removeStorageSync('storeInfo');
}
</script>

<style lang="scss" scoped>
.app-header {
  background-color: #fff;
  color: #334681;
  width: 100vw;
  .top {
    background: #ffffff;
    box-shadow: inset 0px -1px 0px 0px #e8ecef;
    padding-bottom: 4px;
  }
  .content {
    padding: 12px 20px;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(51, 70, 129, 0.1), inset 0px -1px 0px 0px #e8ecef;
  }
  .title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #334681;
    line-height: 22px;
    text-align: right;
    font-style: normal;
    text-transform: none;
  }
}
</style>
